<script lang="ts" setup>
import type {
  VxeFormInstance,
  VxeFormItemPropTypes,
} from '@vben/plugins/vxe-table';

import type { DictApi, ToolTypeApi } from '#/api';

import {
  onBeforeUnmount,
  onDeactivated,
  reactive,
  ref,
  watchEffect,
} from 'vue';

import {
  VxeForm,
  VxeFormItem,
  VxeInput,
  VxeSwitch,
} from '@vben/plugins/vxe-table';

// 自动生成操作按钮
const autoSwitch = ref(false);

// let formData: Ref<ToolTypeApi.Row>;

// 表单数据
const model = defineModel<ToolTypeApi.Row>('data');
const yesNo = defineModel<DictApi.SelectOption[]>('yesNo');
const maintenType = defineModel<DictApi.SelectOption[]>('maintenType');
const formDataModel = model.value;
console.warn('formDataModel', model);
const formData = ref<ToolTypeApi.Row>({
  toolTypeId: formDataModel?.toolTypeId || -1,
  toolTypeCode: formDataModel?.toolTypeCode || '',
  toolTypeName: formDataModel?.toolTypeName || '',
  codeFlag: formDataModel?.codeFlag || 'Y',
  maintenType: formDataModel?.maintenType || '',
  maintenPeriod: formDataModel?.maintenPeriod || 0,
  remark: formDataModel?.remark || '',
});

const formRef = ref<VxeFormInstance<ToolTypeApi.Row>>();

const changeEvent = (params: any) => {
  const $form = formRef.value;
  if ($form) {
    $form.updateStatus(params);
  }
};

// const submitEvent: VxeFormEvents.Submit = () => {
//   confirm('保存成功', '提示', 'success');
//   // VxeUI.modal.message({ content: '保存成功', status: 'success' });
// };

// const resetEvent: VxeFormEvents.Reset = () => {
//   VxeUI.modal.message({ content: '重置事件', status: 'info' });
// };

const codeFlagItemRender = reactive<VxeFormItemPropTypes.ItemRender>({
  name: 'VxeRadioGroup',
  options: yesNo.value,
  events: {
    change({ data }) {
      const isDisabled = data.codeFlag !== 'Y';
      maintenTypeItemRender.props!.disabled = isDisabled;
      maintenPeriodItemRender.props!.disabled = isDisabled;
    },
  },
});

const maintenTypeItemRender = reactive<VxeFormItemPropTypes.ItemRender>({
  name: 'VxeSelect',
  options: maintenType.value,
  props: {
    disabled: false,
  },
});
const maintenPeriodItemRender = reactive<VxeFormItemPropTypes.ItemRender>({
  name: 'VxeInput',
  props: {
    placeholder: '请输入保养周期',
    disabled: false,
  },
});
if (model.value!.codeFlag === 'Y') {
  console.warn('watchEffect', 111);
  maintenTypeItemRender.props!.disabled = false;
  maintenPeriodItemRender.props!.disabled = false;
} else {
  console.warn('watchEffect', 222);
  maintenTypeItemRender.props!.disabled = true;
  maintenPeriodItemRender.props!.disabled = true;
}
const stopWatch = watchEffect(() => {
  formData.value = model.value!;
});
onBeforeUnmount(() => {
  stopWatch();
  console.warn('onBeforeUnmount');
});
onDeactivated(() => {
  console.warn('onBeforeUnmount');
});
</script>

<template>
  <div>
    <VxeForm ref="formRef" :data="formData">
      <VxeFormItem v-if="false" field="toolTypeId" />
      <VxeFormItem
        title="类型编码"
        field="toolTypeCode"
        span="7"
        :item-render="{}"
      >
        <template #default="params">
          <VxeInput
            placeholder="请输入类型编码"
            v-model="formData.toolTypeCode"
            @change="changeEvent(params)"
          />
        </template>
      </VxeFormItem>

      <VxeFormItem span="5" :item-render="{}">
        <VxeSwitch v-model="autoSwitch" open-label="生成" close-label="禁用" />
        自动生成
      </VxeFormItem>

      <VxeFormItem
        title="类型名称"
        field="toolTypeName"
        span="12"
        :item-render="{}"
      >
        <template #default="params">
          <VxeInput
            placeholder="请输入类型名称"
            v-model="formData.toolTypeName"
            @change="changeEvent(params)"
          />
        </template>
      </VxeFormItem>

      <VxeFormItem
        title="是否编码管理"
        field="codeFlag"
        span="8"
        :item-render="codeFlagItemRender"
      />

      <VxeFormItem
        title="保养维护类型"
        field="maintenType"
        span="8"
        :item-render="maintenTypeItemRender"
      />

      <VxeFormItem
        title="保养周期"
        field="maintenPeriod"
        span="8"
        :item-render="maintenPeriodItemRender"
      />

      <VxeFormItem
        class-name="mt-4"
        title="备注"
        field="remark"
        span="24"
        :item-render="{}"
      >
        <template #default="params">
          <VxeTextarea
            v-model="formData.remark"
            placeholder="请输入内容"
            max-length="100"
            show-word-count
            :autosize="{ minRows: 2, maxRows: 6 }"
            @change="changeEvent(params)"
          />
        </template>
      </VxeFormItem>

      <!-- <VxeFormItem align="right" span="24" :item-render="{}">
        <template #default>
          <VxeButton type="submit" status="primary" content="提交" />
          <VxeButton type="reset" content="重置" />
        </template>
      </VxeFormItem> -->
    </VxeForm>
  </div>
</template>
